﻿<!--
 Copyright (c) 2011 Nokia Corporation.
 -->

<phone:PhoneApplicationPage 
    x:Class="SudokuMaster.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SudokuMaster"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="PortraitOrLandscape" 
    Orientation="Portrait"
    shell:SystemTray.IsVisible="False" 
    UseLayoutRounding="True"
    OrientationChanged="PhoneApplicationPage_OrientationChanged">

    <!--The root grid contains background image and the nested grid containing all page content.
    It's used to cause that background image fills whole page despite setting margin on the layout root  -->
    <Grid>
        <!-- Background image -->
        <Image Source="Background.png" Stretch="Fill" />
        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Margin="0,0,0,72">
        <!-- Use 3 rows and 2 columns. This makes it is easy to reposition 
        the UI elements by manipulating the rows and columns when orientation
        changes. -->
            <Grid.RowDefinitions>
                <RowDefinition Height="120"/>
                <RowDefinition Height="460"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="460"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <!-- Logo/title image -->
            <Image Name="Logo" Source="/gfx/logo.png" Grid.Row="0" Grid.ColumnSpan="3" />

            <!-- 9x9 game board placed on the middle of the page-->
            <Grid x:Name="BoardGrid" Grid.Row="1" Grid.ColumnSpan="3" Margin="5">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
            </Grid>

            <!-- Stats; player move counter, empty cells and game time -->
            <Grid x:Name="Statistics" Grid.Row="2" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" Height="64">

                <!-- 5x8 grid for icons and text. Five rows are needed for the landscape
            mode where the stats are stacked vertically, and eight columns for the
            portrait mode -->
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="0"/>
                    <RowDefinition Height="0"/>
                    <RowDefinition Height="0"/>
                    <RowDefinition Height="0"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="18"></ColumnDefinition>
                    <ColumnDefinition Width="60*"></ColumnDefinition>
                    <ColumnDefinition Width="75*"></ColumnDefinition>
                    <ColumnDefinition Width="60*"></ColumnDefinition>
                    <ColumnDefinition Width="75*"></ColumnDefinition>
                    <ColumnDefinition Width="60*"></ColumnDefinition>
                    <ColumnDefinition Width="90*"></ColumnDefinition>
                    <ColumnDefinition Width="18"></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <!-- Background for the stats. -->
                <Image Source="/gfx/statistic.png" Grid.ColumnSpan="8" Grid.RowSpan="5" Stretch="Fill" />

                <!-- Player move counter icon and text -->
                <Image Grid.Column="1" Margin="6" Name="MovesImage" Source="/gfx/move.png" />
                <TextBlock Grid.Column="2" Name="Moves" Text="0" Foreground="Black" Margin="5,0,0,0" FontSize="26" VerticalAlignment="Center" />

                <!-- Empty cells icon and text -->
                <Image Grid.Column="3" Margin="6" Name="EmptyImage"  Source="/gfx/empty.png" />
                <TextBlock Grid.Column="4" Name="Empty" Text="0" Foreground="Black" Margin="5,0,0,0" FontSize="26" VerticalAlignment="Center" />

                <!-- Game time icon and text -->
                <Image Grid.Column="5" Margin="6" Name="GameTimeImage" Source="/gfx/time.png" />
                <TextBlock Grid.Column="6" Name="GameTime" Text="0:00:00" Foreground="Black" Margin="5,0,0,0" FontSize="26" VerticalAlignment="Center"  />
            </Grid>

            <!-- Selection keyboard; placed at the bottom of the grid definition to show up topmost -->
            <local:NumberSelection x:Name="numberSelection" Grid.ColumnSpan="2" Grid.RowSpan="3" Visibility="Collapsed" />

            <!-- Waiting indicator -->
            <local:WaitNote x:Name="waitIndicator" Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed"/>
        </Grid>
    </Grid>

    <!-- ApplicationBar contains new game and highscores -buttons -->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="False" Opacity="0.4">
            <shell:ApplicationBarIconButton IconUri="/gfx/newgame.png" Text="New Game"  Click="NewGameButton_Click" />
            <shell:ApplicationBarIconButton IconUri="/gfx/highscores.png" Text="Highscores" Click="HighscoresButton_Click" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>
    
